<template>
  <div>
    <section>
      <TaiTitle title="房间信息" class="mb20">
        <el-button link type="warning"  @click="editClick('roomInfo')">编辑</el-button>
        <template #append>
          <el-button @click="handleLandlord">业主信息</el-button>
        </template>
      </TaiTitle>
      <div class="primary-section mt20 pv-12">
        <el-row :gutter="20">
          <el-col :span="4" align="right">房间信息</el-col>
          <el-col :span="18">{{ form.buildingName }} - {{ form.chamberName }}</el-col>
        </el-row>
<!--         <el-row :gutter="20" class="mt20">-->
<!--          <el-col :span="4" align="right">分组</el-col>-->
<!--          <el-col :span="18">{{ form.branchName }}</el-col>-->
<!--        </el-row>-->
      </div>
    </section>
     <section>
      <tai-title title="房间备注" class="mb10 mt20">
        <el-button link type="warning" @click="editClick('remark')">编辑</el-button>
      </tai-title>
      <div class="primary-section pv-12">
        <div v-if="form.remark">{{ form.remark }}</div>
        <span v-else class="fc-secondary">暂无备注信息</span>
      </div>
    </section>
    <section class="mt20">
      <TaiTitle title="视频图片" class="mb20">
        <el-button class="mt5" link type="warning">编辑</el-button>
      </TaiTitle>
      <div class="primary-section pv-12"  style="color: var(--el-text-color-secondary);">
        暂无视频图片
      </div>
    </section>
    <el-dialog title="编辑" v-model="roomInfoVisible" width="520px" :fullscreen="mobile">
      <el-form :model="roomInfoForm" ref="roomInfoFormRef" label-width="100px">
        <el-form-item label="房间信息" prop="chamberName" :rules="[{ required: true, message: '请输入房间号', trigger: 'blur' }]">
          <div class="flex-row-center" style="width: 100%;">
            <span class="mr10">{{ roomInfoForm.buildingName }}</span>
            <el-input v-model="roomInfoForm.chamberName" placeholder="房间号" style="width: 150px;"></el-input>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="handleRoomInfoCancel">取消</el-button>
        <el-button type="primary" @click="handleRoomInfoOk">确定</el-button>
      </template>
    </el-dialog>
    <!-- 编辑备注信息弹窗 -->
    <el-dialog title="编辑" v-model="remarkVisible" width="520px" :fullscreen="mobile">
      <el-form :model="remarkForm" ref="remarkFormRef" label-width="0">
        <el-form-item prop="remark">
          <el-input type="textarea" v-model="remarkForm.remark" :rows="4" maxlength="150" placeholder="请填写备注信息" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleRemarkClose">取消</el-button>
          <el-button type="primary" @click="handleRemarkOk">
            确认
          </el-button>
        </span>
      </template>
    </el-dialog>
    <Landlord :visible="lodgingDetailVisible" @cancel="() => lodgingDetailVisible = false" />
  </div>
</template>
<script setup name="RoomSource">
import useAppStore from '@/store/modules/app'
import Landlord from '../lodgingDetail/landlord.vue'
import RoomApi from '@/api/room/room'

const { proxy } = getCurrentInstance()

const props = defineProps({
  roomInfo: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

const remarkVisible = ref(false)
const roomInfoVisible = ref(false)
const lodgingDetailVisible = ref(false)
const data = reactive({
  form: {
    buildingName: '',
    chamberName: '',
    branchName: '',
    remark: ''
  },
  remarkForm: {
    remark: ''
  },
  roomInfoForm: {
    buildingName: '',
    chamberName: '',
    branchName: '',
    remark: ''
  }
})
const { form, remarkForm, roomInfoForm } = toRefs(data)
const mobile = computed(() => useAppStore().device === 'mobile')

function editClick(type) {
  switch (type) {
    case 'remark':
      proxy.resetForm('remarkFormRef')
      remarkForm.value.remark = form.value.remark
      remarkVisible.value = true
      break;
    case 'roomInfo':
      proxy.resetForm('roomInfoFormRef')
      roomInfoForm.value = { ...form.value }
      roomInfoVisible.value = true
  }
}

/* 业主弹窗 */
function handleLandlord() {
  lodgingDetailVisible.value = true
}

/* 关闭编辑弹窗 */
function handleRemarkClose() {
  remarkVisible.value = false
}
function handleRemarkOk() {
  console.log(props.roomInfo.roomId)
  console.log(remarkForm.value.remark)

  if (!props.roomInfo.roomId || props.roomInfo.roomId === '') {
    remarkVisible.value = false
    return
  }

  if (!remarkForm.value.remark || remarkForm.value.remark === '') {
    remarkVisible.value = false
    return
  }

  RoomApi.editRemark(props.roomInfo.roomId, remarkForm.value.remark).then(res => {
    proxy.$modal.msgSuccess('操作成功')
    form.value.remark = remarkForm.value.remark
    remarkVisible.value = false
  })
}

/* 房间信息编辑 */
function handleRoomInfoOk() {
  roomInfoVisible.value = false
}
function handleRoomInfoCancel() {
  roomInfoVisible.value = false
}

/* 获取房间信息 */
function getRoomInfo() {
  console.log(props.roomInfo)
  console.log(props)
  form.value = props.roomInfo
}

getRoomInfo()
</script>
